<template>
  <!-- 随访任务 -->
  <section class="main">
    <div class="main_left">
      <el-button :disabled="!qxBtns.edit" @click="onEdit(null)" type="primary" icon="el-icon-circle-plus-outline" style="width:100%;">新增随访</el-button>
      <br>
      <h3>随访分组</h3>
      <ul class="visitNav">
        <li v-for="(item,index) in visitStatusCount" :key="index" :class="[item.statisticId==form.status?'active':'']" @click="onGroup(item.statisticId)"><i class="el-icon-s-order"></i>{{item.statisticName}}({{item.count}})</li>
      </ul>
      <br>
      <h3>随访类型</h3>
      <ul class="visitNav">
        <li :class="[!form.visitTypeId?'active':'']" @click="onVisitType('')"><i class="el-icon-s-order"></i>全部({{toTypeCount}})</li>
        <li v-for="(item ,index ) in visitTypeCount" :key="index" :class="[item.statisticId==form.visitTypeId?'active':'']" @click="onVisitType(item.statisticId)"><i class="el-icon-s-order"></i>{{item.statisticName}}({{item.count}})</li>
      </ul>
    </div>
    <div class="main_right">
      <div class="main_right_c">
        <h2 class="title">全部随访</h2>
        <div class="visitSearch">
          <el-form :inline="true" @submit.native.prevent="getData(-1)">
            <el-form-item>
              <el-date-picker v-model="createTimeRange" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="创建开始日期" end-placeholder="创建结束日期">
              </el-date-picker>
            </el-form-item>
            <!-- <el-form-item>
              <el-date-picker v-model="visitTimeRange" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="随访开始日期" end-placeholder="随访结束日期">
              </el-date-picker>
            </el-form-item> -->
            <!-- <el-form-item>
              <userSearch v-model="form.visitUserId" placeholder="随访人员"></userSearch>
            </el-form-item> -->
            <el-form-item>
              <userSearch v-model="form.createUserId" placeholder="创建人员"></userSearch>
            </el-form-item>
            <el-form-item>
              <userSearch v-model="form.scheduleVisitUserId" placeholder="计划随访人员"></userSearch>
            </el-form-item>
            <el-form-item>
              <patientSearch v-model="form.patientId"></patientSearch>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" circle icon="el-icon-search" native-type="submit"> </el-button>
            </el-form-item>
          </el-form>
        </div>
        <ul class="visitList">
          <li v-for="(item,index) in tableList" :key="index">
            <div class="listLeft">
              <el-image v-if="item.headUrl" style="width: 120px; height: 120px" :src="item.headUrl|imageUrl"></el-image>
              <img v-else style="width: 120px; height: 120px" src="@/img/unknown-avatar.png" />
            </div>
            <div class="listRight">
              <div class="listRightC">
                <div>
                  <el-link type="primary">{{item.patientName}}</el-link> （ <span>{{item.sex==1?"男":"女"}}</span>&nbsp;&nbsp;<span v-if="item.age>8">{{item.age}}岁</span> <span v-else> {{item.birthday|toTimeContrast}}</span>）
                </div>
                <div class="listText">创建时间：{{item.createTime}} / 创建人员：{{item.createUserName}} / 主管医生：{{item.managerDoctorName}}</div>
                <div class="listText">计划随访日期：{{item.scheduleVisitTime}} / 计划随访人员：{{item.scheduleVisitUserName}} / 随访类型：{{item.visitTypeName}}</div>
                <div v-if="item.status==4" class="listText">取消原因：{{item.cancelReason}}</div>
                <div v-else class="listText">随访内容：{{item.visitContent}}</div>
                <div class="listBtns">
                  <el-button v-if="item.status==1||item.status==2" :disabled="!qxBtns.execute" plain icon="el-icon-document" size="mini" @click="beginVisit(item)">随访</el-button>
                  <el-button v-if="item.status==1||item.status==2" :disabled="!qxBtns.edit" plain icon="el-icon-edit" size="mini" @click="onEdit(item)">修改</el-button>
                  <el-button :disabled="!qxBtns.del" v-if="item.status==1||item.status==2" plain icon="el-icon-document-delete" size="mini" @click="onCancel(item)">取消</el-button>
                  <el-button v-if="item.status==4||item.status==3" plain icon="el-icon-view" size="mini" @click="onEdit(item)">查看</el-button>
                </div>
                <div class="status-label">
                  <el-badge v-if="item.status==1" type="danger" value="待随访"></el-badge>
                  <el-badge v-else-if="item.status==2" type="success" value="随访中"></el-badge>
                  <el-badge v-else-if="item.status==3" type="primary" value="已结束"></el-badge>
                  <el-badge v-else-if="item.status==4" type="info" value="已取消"></el-badge>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <div v-if="tableList.length == 0" style="color:#999;padding:10px 0;text-align:center;">
          <i class="iconfont iconwushuju" style="font-size:40px;"></i>
          <div>暂无数据</div>
        </div>
        <br />
        <pager v-model="pager" @change-pagenum="getData"></pager>
      </div>
      <dialogEndVisit v-model="dialogEndVisit" :curItem="curItem" @success="onSuccessEnd"></dialogEndVisit>
    </div>
  </section>
</template>
<script>
export default {
  name: "visit",
  components: {
    userSearch: () => import("@/pages/_com/userSearch.vue"),
    patientSearch: () => import("@/pages/_com/patientSearch.vue"),
    dialogEndVisit: () => import("./_com/dialogEndVisit.vue")
  },
  computed: {
    toTypeCount() {
      const th = this;
      let count = 0;
      th.visitTypeCount.forEach(ele => {
        count += ele.count;
      });
      return count;
    }
  },
  data() {
    return {
      dialogEndVisit: false,
      curItem: null,
      form: {
        visitUserId: "",
        createUserId: "",
        scheduleVisitUserId: "",
        status: -1,
        visitTypeId: "",
        patientId: ""
      },
      // visitStatusEnum: [],
      visitTimeRange: null,
      createTimeRange: null,
      pager: { pageSize: 10, pageNum: 1, total: 0 },
      qxBtns: {},
      tableList: [],
      visitTypeCount: [], //类型统计
      visitStatusCount: [] //随访状态推统计
    };
  },
  created() {
    const th = this;
  },
  mounted() {
    const th = this;
    th.getQX();
    th.addPageCache("visit");
    th.followUpVisitstatisticstatus();
    th.followUpVisitstatisticvisitType();
    th.getData();
    // th.getCommonConfigByKey("随访状态").then(res => {
    //   th.visitStatusEnum = res;
    // });
  },
  activated() {
    const th = this;
    th.followUpVisitstatisticstatus();
    th.followUpVisitstatisticvisitType();
    th.getData();
  },
  methods: {
    //开始随访
    beginVisit(obj) {
      const th = this;
      let j = {
        id: th.jiaMi(obj.id)
      };
      th.$router.push({
        path: "visitDetail",
        query: th.getUrlToken(j)
      });
    },
    //取消随访
    onSuccessEnd() {
      const th = this;
      th.curItem.status = 4;
      let statusCount = th.visitStatusCount.find(d => {
        return d.statisticId == 4;
      });
      if (statusCount) {
        statusCount.count += 1;
      }
    },
    //获取数据
    getData(type) {
      let th = this;
      if (type == -1) {
        th.pager.pageNum = 1;
        th.pager.total = 0;
      }
      let j = {
        createTimeRange: "",
        visitTimeRange: ""
      };
      if (th.createTimeRange) {
        j.createTimeRange = JSON.stringify({
          startTime: th.createTimeRange[0],
          endTime: th.createTimeRange[1]
        });
      }
      if (th.visitTimeRange) {
        j.visitTimeRange = JSON.stringify({
          startTime: th.visitTimeRange[0],
          endTime: th.visitTimeRange[1]
        });
      }
      Object.assign(j, th.pager);
      Object.assign(j, th.form);
      th.showLoading();
      th.$api
        .followUpVisitpageQuery(j)
        .then(res => {
          if (res.executed) {
            th.tableList = res.dataBody.list;
            th.pager.total = res.dataBody.total;
          }
          th.showLoading(false);
        })
        .catch(res => {
          th.showLoading(false);
        });
    },
    //状态统计
    followUpVisitstatisticstatus() {
      const th = this;
      let j = {};
      th.$api.followUpVisitstatisticstatus(j).then(res => {
        th.visitStatusCount = res.data;
      });
    },
    //类型统计
    followUpVisitstatisticvisitType() {
      const th = this;
      let j = {};
      th.$api.followUpVisitstatisticvisitType(j).then(res => {
        if (res.executed) {
          th.visitTypeCount = res.data;
        }
      });
    },
    //设置随访状态
    onGroup(id) {
      const th = this;
      th.form.status = id;
      th.pager.pageNum = 1;
      th.getData();
    },
    //设置随访类型
    onVisitType(id) {
      const th = this;
      th.form.visitTypeId = id;
      th.pager.pageNum = 1;
      th.getData();
    },
    //取消
    onCancel(obj) {
      const th = this;
      th.curItem = obj;
      th.dialogEndVisit = true;
    },
    //查看详情
    onEdit(obj) {
      const th = this;
      let q = {
        id: "",
        patientName: "",
        docName: "",
        planUser: "",
        status: ""
      };
      if (obj) {
        q.id = th.jiaMi(obj.id);
        q.patientName = obj.patientName;
        q.docName = obj.managerDoctorName;
        q.planUser = obj.scheduleVisitUserName;
        q.status = obj.status;
      }
      //已完成
      if (q.status == 3) {
        th.$router.push({
          path: "visitDetail",
          query: th.getUrlToken(q)
        });
      } else {
        th.$router.push({
          path: "editVisit",
          query: th.getUrlToken(q)
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  overflow: hidden;
  &::after {
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    content: "";
  }
  .main_left {
    width: 220px;
    float: left;
    position: relative;
    margin-right: -220px;
    height: 100%;
    overflow: auto;
  }
  .main_right {
    width: 100%;
    float: right;
    height: 100%;
    overflow: auto;
    .main_right_c {
      margin-left: 250px;
      .title {
        margin: 0 0 20px 0;
      }
    }
  }
}
.visitNav,
.visitNav li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.visitNav li {
  line-height: 38px;
  padding: 0 15px;
  border-radius: 4px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  &:hover {
    background: #f6f6f6;
  }
  i {
    margin-right: 10px;
  }
}
.visitNav li.active {
  background: #f56c6c;
  color: #fff;
}
.visitSearch {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
.visitList {
  li {
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    &::after {
      display: block;
      clear: both;
      visibility: hidden;
      height: 0;
      overflow: hidden;
      content: ".";
    }
    .listLeft {
      width: 120px;
      float: left;
      position: relative;
      margin-right: -120px;
    }
    .listRight {
      width: 100%;
      float: right;
      .listRightC {
        margin-left: 150px;
        position: relative;
        .status-label {
          position: absolute;
          right: 15px;
          top: 0;
        }
      }
    }
  }
  .el-link {
    font-size: 18px;
  }
  .listBtns {
    margin-top: 7px;
  }
}
.listText {
  color: #888;
  line-height: 1.74;
}
</style>